#@layout()
#define script()
<script src="#(CPATH)/static/components/vditor/index.min.js"></script>
<script src="#(CPATH)/static/components/ckeditor5/ckeditor.js"></script>
<script src="#(CPATH)/static/components/editable/js/bootstrap-editable.min.js"></script>
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script src="#(CPATH)/static/components/highlight/highlight.pack.js"></script>


<script>

    var $select = $('.product-tags').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        persist: false,
        addPrecedence: true,
        create: true,
        render: {
            option_create: function (data, escape) {
                return '<div class="create" style="padding-left: 5px"> 添加标签：<strong style="color: #DD1144">' + escape(data.input) + '</strong></div>';
            }
        }
    });


    $(".newTag").each(function () {
        $(this).on('click', function () {
            $select[0].selectize.createItem($(this).text());
        })
    });


    $(".tflag").each(function () {
        $(this).on('click', function () {
            $("#flag").val($(this).text());
        })
    });


    $(".submitBtn").on("click", function () {
        $("#productStatus").val($(this).attr("data-status"));
        doSubmit();
    });

    // 全局函数,在CKEditor ctrl + s 快捷键处用到,保留article的status
    window.doSubmit = function () {
        if (window.currentCKEditor) {
            $("#content").val(window.currentCKEditor.getData());
        } else if (window.currentVditor) {
            $("#content").val(window.currentVditor.getHTML());
        }
        ajaxSubmit("#form", function (data) {
            $("#productId").attr("value", data.id);
            toastr.success('产品信息保存成功。');
        });
    };


    $("#removeThumbnail").on("click", function () {
        $("#thumbnail").attr("src", "#(CPATH)/static/commons/img/nothumbnail.jpg");
        $("#productThumbnail").val("");
    })

    var editMode = "#(editMode ?? 'html')";
    if (editMode === 'html') {
        initCkEdtior('#editor');
    } else {
        initVdtior('editor');
    }


    setSaveHotKeyFunction(doSubmit);

    $(".choseImage").on("click", function () {
        var html = $("#imageItem").html();
        layer.data.src = null;
        layer.open({
            type: 2,
            title: '选择图片',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/browse',
            end: function () {
                if (layer.data.src != null) {
                    var src = jpress.cpath + layer.data.src;
                    html = html.replace(/{{src}}/g, src);
                    $(".choseImage").parent().before(html);
                }
            }
        });
    });

    $('body').on('click', '.image-reset', function (event) {
        event.currentTarget.parentElement.remove();
    });

    function allowDrop(e)
    {
        e.preventDefault();
    }

    var dragdiv = null;
    function drag(e, dom) {
        dragdiv = dom;
    }

    function drop(e, dom) {
        $(dom).before($(dragdiv).prop("outerHTML"));
        $(dragdiv).remove();
    }

</script>

<script id="imageItem" type="text/tmpl">
	<div class="img-wrapper img-hover" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)"  ondragstart="drag(event, this)">
        <img src="{{src}}">
        <input type="hidden" name="imageSrcs" value="{{src}}" />
        <input type="hidden" name="imageIds" value="0" />
        <i class="fas fa-trash-alt image-reset" ></i>
    </div>
</script>
#end
#define css()
<link href="#(CPATH)/static/components/editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.bootstrap4.css" rel="stylesheet">
<link href="#(CPATH)/static/components/highlight/styles/github.css" rel="stylesheet">
<link href="#(CPATH)/static/components/vditor/index.css" rel="stylesheet">
<style>
    .popover-content {
        padding: 9px 14px;
        margin: 0 10px;
    }

    #slug {
        cursor: pointer;
    }


    .img-wrapper {
        position: relative;
        width: 20%;
        height: 160px;
        border: 1px solid #eee;
        display: inline-block;
        cursor: move;
    }

    .img-wrapper img {
        width: 100%;
        height: 100%;
    }

    .form-group .img-wrapper img {
        border: none
    }

    .image-reset {
        display: none;
    }

    .img-hover:hover .image-reset {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #FFF;
        width: 100%;
        z-index: 10;
        height: 36px;
        line-height: 36px;
        background: #000;
        filter: alpha(opacity=30);
        -moz-opacity: 0.5;
        opacity: 0.5;
        cursor: pointer;
        text-align: center;
    }

    .img-hover .image-reset {
        display: none;
    }

    .vditor-wysiwyg pre.vditor-reset:focus {
        outline: none;
        background-color: #fff;
    }

    .ck-editor__editable_inline {
        min-height: 500px;
    }

</style>
#end

#define content()
    <section class="content-header">

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">

                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h1>
                                产品编辑
                                <small data-toggle="tooltip" title="" data-placement="right"
                                       data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                                <small> 首页 / 商品 / 产品编辑</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <form action="#(CPATH)/admin/product/doSave" method="post" id="form">
            <input type="hidden" id="productStatus" name="product.status" value='#(product.status ?? "1")'>
            <input type="hidden" id="productId" name="product.id" value="#(product.id ??)">
            <input type="hidden" name="product.user_id" value="#(product.user_id ?? USER.id)">
            <div class="row">
                <div class="col-lg-9">

                    <!-- /.card-header -->
                    <!-- form start -->
                    <div class="">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="input" class="form-control form-control-lg" name="product.title" autocomplete="off"
                                       placeholder="请输入标题"
                                       id="product-title"
                                       value="#(product.title ??)">
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-sm-12" style="padding-bottom: 2px">
                                网址：<span class="domainSpan">#option('web_domain')</span>#(CPATH)/product/<span id="slug"
                                                                                                               class="slugSpan"
                                                                                                               for-input="product-slug">#(product.slug ??)</span>#if(option("web_fake_static_enable"))#option('web_fake_static_suffix')#end
                                #if(product && product.isNormal())
                                （<a href="#(product.url)" target="_blank">访问</a>）
                                #end
                                <input type="hidden" id="product-slug" name="product.slug" value="#(product.slug ??)">
                            </div>
                            <div class="col-sm-12" style="z-index: 9999;">
                                <div id="editor" >#(product.content ??)</div>
                                <input type="hidden" name="product.content" id="content"/>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="card card-outlinecard-solid">
                                    <div class="card-header with-border">
                                        <h3 class="card-title">产品缩略图</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="card-body p-0">

                                            #for(image : images)
                                            <div class="img-wrapper img-hover" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)"  ondragstart="drag(event, this)">
                                                <img src="#(image.src ??)">
                                                <input type="hidden" name="imageSrcs" value="#(image.src ??)" />
                                                <input type="hidden" name="imageIds" value="#(image.id ?? '0' )" />
                                                <i class="fas fa-trash-alt image-reset" ></i>
                                            </div>
                                            #end

                                            <div class="img-wrapper img-hover" style="cursor: pointer">
                                                <img src="#(CPATH)/static/commons/img/chose-image-btn.png" class="choseImage">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="card card-outlinecard-solid">
                                    <div class="card-header with-border">
                                        <h3 class="card-title">价格</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">销售价格</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="price"
                                                           name="product.price" placeholder="" value="#(product.price ??)">
                                                    <p class="text-muted">产品的实际销售价格。</p>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">原价</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="origin_price"
                                                           name="product.origin_price" placeholder="" value="#(product.origin_price ??)">
                                                    <p class="text-muted">产品的原始价格，页面会使用删除线进行显示。</p>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">限时价格</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="limited_price"
                                                           name="product.limited_price" placeholder="" value="#(product.limited_price ??)">
                                                    <p class="text-muted">限时价格（早鸟价）。</p>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">限时时间</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control datetime" id="limited_time"
                                                           name="product.limited_time" placeholder="" value="#(product.limited_time ??)">
                                                    <p class="text-muted">到该时间后，限时价格会自动恢复到原始价格。</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        #if(memberGroups)
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="card card-outlinecard-solid">
                                    <div class="card-header with-border">
                                        <h3 class="card-title">会员价</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="card-body">

                                            #for(group : memberGroups)
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">#(group.name ??)</label>
                                                <div class="col-sm-6">
                                                    <input type="hidden" name="memberGroupIds" value="#(group.id ??)">
                                                    <input type="text" class="form-control"
                                                           name="memberGroupPrices" placeholder="" value="#number(group.priceInfo.price ??,'0.00')">
                                                    <p class="text-muted">#(group.name ??)购买该产品的价格。</p>
                                                </div>
                                            </div>
                                            #end

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end memberGroups-->
                        #end



                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="card card-outlinecard-solid">
                                    <div class="card-header with-border">
                                        <h3 class="card-title">分销</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">启用分销功能</label>
                                                <div class="col-sm-6">
                                                    <input type="checkbox" class="switchery"  data-for="dist_enable"  #checkedIf(product.dist_enable ??)>
                                                    <input type="hidden" id="dist_enable" name="product.dist_enable">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">分销收益</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="dist_amount"
                                                           name="product.dist_amount" placeholder="" value="#(product.dist_amount ??)">
                                                    <p class="text-muted">当用户分享的产品连接有人付费后，用户将获得的分成（单位：元）。</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="card card-outlinecard-solid">
                                    <div class="card-header with-border">
                                        <h3 class="card-title">其他</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        <div class="card-body">

                                            #(fields.render())

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3">
                    <div class="card card-outlinecard-solid">
                        <div class="card-body">
                            <button type="button" data-status="1" class="btn btn-primary btn-sm submitBtn">上架
                            </button>
                            <button type="button" data-status="2" class="btn btn-default btn-sm submitBtn">草稿
                            </button>
                            <a href="#" data-status="3" class="float-right submitBtn"
                               style="padding-top: 5px;">移至垃圾箱</a>
                        </div>
                    </div>



                    <div class="card card-outlinecard-solid">
                        <div class="card-header with-border ">
                            <h3 class="card-title">分类</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                #for(category : categories)
                                <div class="form-check">
                                    <label>
                                        #for(i = 0; i < category.layerNumber; i++)
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        #end

                                        #if(category.isCheck)
                                        <input type="checkbox" name="category" value="#(category.id)" checked/>
                                        #else
                                        <input type="checkbox" name="category" value="#(category.id)"/>
                                        #end


                                        #(category.title ??)
                                    </label>
                                </div>
                                #end
                            </div>
                        </div>
                    </div>

                    <div class="card card-outlinecard-solid">
                        <div class="card-header with-border ">
                            <h3 class="card-title">标签</h3>
                        </div>
                        <div class="card-body">
                            <select class="product-tags" multiple="multiple" name="tag">
                                #for(tag : tags)
                                <option value="#(tag.title ??)" selected>#(tag.title ??)</option>
                                #end
                            </select>
                            <p class="text-muted">多个标签请用 “回车键” 或英文逗号（,）隔开。</p>

                            <div class="tags">
                                #productTags(count = 20)
                                #for(tag : tags)
                                <a href="javascript:;" class="newTag">#(tag.title)</a>
                                #end
                                #end
                            </div>
                        </div>
                    </div>


                    <div class="card card-outlinecard-solid">
                        <div class="card-header with-border ">
                            <h3 class="card-title">产品封面</h3>
                        </div>
                        <div class="card-body p-0">
                            <img src="#(CPATH)#(product.thumbnail ?? '/static/commons/img/nothumbnail.jpg')"
                                 style="width: 100%;max-height: 500px"
                                 id="thumbnail">
                            <input type="hidden" value="#(product.thumbnail ??)" name="product.thumbnail"
                                   id="productThumbnail">
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                    for-src="thumbnail"
                                    for-input="productThumbnail">选择图片
                            </button>
                            <a href="javascript:;" style="padding-left: 15px" id="removeThumbnail">移除</a>
                        </div>
                    </div>


                    <div class="card card-outlinecard-solid">
                        <div class="card-header with-border ">
                            <h3 class="card-title">模板</h3>
                        </div>
                        <div class="card-body">

                            <div class="form-group row">
                                <select class="form-control" name="product.style">
                                    <option value="">默认（product.html）</option>
                                    #for(style : styles)
                                    <option value="#(style)" #selectedIf(product && product.style==style)>
                                        product_#(style).html
                                    </option>
                                    #end
                                </select>
                            </div>

                            <div class="form-group row">
                                <input type="text" class="form-control" name="product.flag"
                                       placeholder="展示标识" value="#(product.flag ??)" id="flag"/>
                                #if(flags && flags.size() > 0)
                                <p class="text-muted">当前模板支持的展示标识有：</p>
                                <div class="tags">
                                    #for(flag : flags ??)
                                    <a href="javascript:;" class="tflag">#(flag)</a>
                                    #end
                                </div>
                                #end

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </form>
    </section>

#end
